
<template>
    <div id="tree">
        <h1 class="top_name">用户列表</h1>
        <div>
            <div class="condition">
                <div class="search-text">
                    <label>选择团队:</label>
                    <el-select v-model="team_id" placeholder="请选择">
                        <el-option
                                v-for="item in teamList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search-button">
                    <el-button type="primary" @click="getTreeList()">搜索</el-button>
                    <el-button type="primary" @click="reset()">重置</el-button>
                    <el-button type="primary" @click="exportExcel()">导出</el-button>
                </div>
            </div>
        </div>

        <div>
            <el-tree :data="data"
                     class="tree_class"
                     :props="defaultProps"
                     @node-click="handleNodeClick">
            </el-tree>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'TeamTree',
        data(){
            return{
                team_id:'',
                teamList:[{
                    value: '选项1',
                    label: '黄金糕'
                }],
                data: [{
                    id: 1,
                    label: '一级 1',
                    children: [{
                        label: '二级 1-1',
                        children: [{
                            id:5,
                            label: '三级 1-1-1',
                        },
                            {
                                id:6,
                                label: '三级 1-2-1',
                                children:[{
                                    id:7,
                                    label: '三级 1-2-1',
                                }]
                            },
                        ]
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        mounted() {
            this.getTreeList();
        },
        components:{
        },
        methods:{
            handleNodeClick(data) {
                console.log(data);
            },
            getTreeList(){
                this.$store.commit("changeLoading",true)
                this.$api.getTreeList().then((res)=>{
                    // this.data=res.data; // 处理数据
                    this.$store.commit("changeLoading",false)
                },(err)=>{
                    this.$message.error(err.msg)
                })

            },
            getSearch(){ // 搜索

            },
            reset(){ // 重置
                this.team_id='';
            },
            exportExcel(){ // 导出

            },
        }
    }
</script>
<style scoped>
    .top_name{
        text-align: left;
        padding-left: 10px;
        font-size: 0.9rem;
        margin-top: -5px;
        padding-bottom: 0.5rem;
        color: #303133;
    }
    .condition{
        display: flex;
        justify-content: space-between;
    }
    .search-text{
        display: flex;
        align-items: center
    }
    .search-button{
        padding-right: 9rem;
    }
    #tree >>> .el-input__inner{
        height: 2rem;
    }

    label{
        font-size: 0.8rem;
        padding: 0 0.1rem 0 0.8rem;
    }
    label:nth-child(1){
        font-size: 0.8rem;
        padding: 0 0.1rem 0 0.3rem;
    }
    #tree >>>   .el-tree-node__content{
        padding-bottom: 1.3rem;
    }
    #tree >>>   .el-tree-node__expand-icon{
        font-size: 1.2rem;
    }
    #tree >>>   .el-tree-node__label{
        font-size: 1.0rem;
    }
    #tree >>>   .el-tree{
        background:none;
    }
    .tree_class{
        padding-top: 0.2rem;
        margin-top: 2.5rem;
    }



</style>

